<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<meta name="referrer" content="no-referrer">
		<script type="text/javascript" src="js/hls.min.js"></script>
		<script type="text/javascript" src="js/flv.min.js"></script>
		<script type="text/javascript" src="js/yb-player-gesture.js"></script>
		<script type="text/javascript" src="js/yb-player-subtitle.js"></script>
		<script type="text/javascript" src="js/yb-player-danmu.js"></script>
		<script type="text/javascript" src="js/yb-player-pano.js"></script>
		<script type="text/javascript" src="js/yb-player.js"></script>
		<script type="text/javascript" src="../js/uni-webview-js@1.5.4.js"></script>
		
		<link rel="stylesheet" type="text/css" href="css/yb-player.css"/>
		<link rel="stylesheet" type="text/css" href="css/yb-player-plugin.css"/>
		<title>列表播放器</title>
		<style>
			html, body {
				padding: 0;
				margin: 0;
				background-color: #000;
				width: 100vw;
				height: 100vh;
			}
			.my-player {
				width: 100%;
				height: 100%;
			}
			.loading {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
			}
			.close {
				position: fixed;
				top: 5%;
				left: 5%;
			}
			.close svg {
				width: 20px;
				height: 20px;
				fill: #fff;
			}
		</style>
	</head>
	<body>
		<!-- Specify the player container -->
		<div id="my-player" class="my-player">
		</div>
		<!-- 考虑到APP端加载视频数据可能会很久，第一次显示视频需要先显示等待提示 -->
		<div class="loading">正在加载数据...</div>
		<div class="close" onclick="stop()">
			<svg viewBox="0 0 1024 1024"><path d="M783.453091 140.101818l-315.578182 315.578182-315.578182-315.578182a41.053091 41.053091 0 0 0-28.113454-11.264 37.888 37.888 0 0 0-27.554909 11.915637 37.608727 37.608727 0 0 0-11.915637 27.554909c0 10.426182 3.723636 19.828364 11.264 28.206545l315.578182 315.578182L95.883636 827.578182a38.446545 38.446545 0 0 0-10.612363 38.818909c3.723636 15.080727 12.939636 24.389818 27.554909 28.206545 14.615273 3.723636 27.741091 0.186182 39.377454-10.705454l315.578182-315.578182 315.578182 315.578182c8.378182 7.447273 17.687273 11.264 28.113455 11.264 10.426182 0 19.642182-4.002909 27.554909-11.915637a37.608727 37.608727 0 0 0 11.915636-27.554909 41.239273 41.239273 0 0 0-11.170909-28.206545L524.194909 512l315.578182-315.485091a38.446545 38.446545 0 0 0 10.612364-38.818909 36.119273 36.119273 0 0 0-28.206546-28.206545 38.446545 38.446545 0 0 0-38.818909 10.705454z"></path></svg>
		</div>
		<script>
			var mp
			function setVideo (arg) {
				//开始加载视频后可以关闭等待提示
				document.getElementsByClassName('loading')[0].style.display = 'none'
				document.getElementsByClassName('close')[0].style.display = 'none'
				var params = JSON.parse(decodeURIComponent(arg))
				var src = params.src
				var poster = params.poster
				var type = params.type
				var title = params.title
				var isLive = params.isLive
				var autoplay = params.autoplay
				var initialVolume = params.initialVolume
				var initialLight = params.initialLight
				if ( mp ) {
					mp.off('fullscreenchange')
					mp.unloadGestureEvent()
					mp.unloadVideo()
					mp.unload()
				}
				mp = new YbPlayer({
					container:'#my-player',
					src,
					title,
					poster,
					type,
					autoplay,
					loop: false,
					header: true,
					controls: true,
					isLive,
					exitDirection: 'portrait',
					height: '100%',
					custom: {
						gesture: {
							initialVolume,
							initialLight,
							disableLight: true,
							disableVolume: true
						},
						header: getHeaderConfig(mp?.getFullscreen())
					},
					decoder: {
						hls: {
							loader: Hls
						},
						flv: {
							loader: flvjs
						}
					}
				})
				mp.load()
				mp.loadVideo()
				mp.loadGestureEvent(true)
				mp.on('fullscreenchange', function () {
					if ( mp.getFullscreen() ) {
						mp.setGesture('disableVolume', false)
						mp.setGesture('disableLight', false)
					} else {
						mp.setGesture('disableVolume', true)
						mp.setGesture('disableLight', true)
					}
					mp.setCustom('header', getHeaderConfig(mp.getFullscreen()))
					mp.unloadCustom()
					mp.loadCustom()
				})
			}
			
			function getHeaderConfig (fullscreen) {
				return fullscreen ? {
					disableBack: false
				} : {
					disableBack: true,
					leftSlots: [{
						innerHTML: `
							<div class="header_close">
								<svg viewBox="0 0 1024 1024"><path d="M783.453091 140.101818l-315.578182 315.578182-315.578182-315.578182a41.053091 41.053091 0 0 0-28.113454-11.264 37.888 37.888 0 0 0-27.554909 11.915637 37.608727 37.608727 0 0 0-11.915637 27.554909c0 10.426182 3.723636 19.828364 11.264 28.206545l315.578182 315.578182L95.883636 827.578182a38.446545 38.446545 0 0 0-10.612363 38.818909c3.723636 15.080727 12.939636 24.389818 27.554909 28.206545 14.615273 3.723636 27.741091 0.186182 39.377454-10.705454l315.578182-315.578182 315.578182 315.578182c8.378182 7.447273 17.687273 11.264 28.113455 11.264 10.426182 0 19.642182-4.002909 27.554909-11.915637a37.608727 37.608727 0 0 0 11.915636-27.554909 41.239273 41.239273 0 0 0-11.170909-28.206545L524.194909 512l315.578182-315.485091a38.446545 38.446545 0 0 0 10.612364-38.818909 36.119273 36.119273 0 0 0-28.206546-28.206545 38.446545 38.446545 0 0 0-38.818909 10.705454z"></path></svg>
							</div>
						`,
						click: function () {
							stop()
						}
					}],
					more: [{
						text: '下载视频',
						click: function () {
							YbPlayer.postMessage({download: true })
						}
					}]
				}
			}
			
			function stop () {
				if ( mp ) {
					mp.off('fullscreenchange')
					mp.unloadGestureEvent()
					mp.unloadVideo()
					mp.unload()
				}
				YbPlayer.postMessage({ destroyed: true })
			}
			
			function play () {
				if ( mp && mp.video ) mp.video.play()
			}
			function pause () {
				if ( mp && mp.video ) mp.video.pause()
			}
			
			window.onload = function () {
				YbPlayer.postMessage({ ready: 1 });
			}
		</script>
	</body>
</html>